[기초] 웹퍼블리싱 태그의 사용과 쓰임

 

저번 주에 이어 세번째 연재를 작성하고 있습니다^^ 저번주는 혼자 힘으로 "Hello World"를 출력하는 웹사이트 만들기란 주제로 포스팅했구여 이를 통해 가장 기본이 되는 웹페이지의 작성 방법에 대하여 알아봤습니다. 오늘은 그 안에 사용되는 태그의 쓰임과 활용법에 대하여 알아보겠습니다.

# 태그란?

태그는 웹사이트에 구성하는 html의 가장 기본이 되는 단위입니다. 태그를 웹페이지 안에 사용함으로써  고유한 기능과 의미를 가집니다.

태그는 다음과 같이 사용됩니다.



태그는 위처럼 '<' 의 부등호를 사용하여 쓰이며 '<' 시작하여 '>' 닫는 형태로 사용됩니다. 그럼 위의 <div>태그를 예로 좀 더 자세히 볼까요?

위의 코드를 보세요. 상단은 <div> 그리고 아래에는 </div>가 존재하는데요... 태그는 이처럼 한쌍으로 사용됩니다.  위와같이 시작을 여는 태그와 닫는 태그로 구성되며 닫는태그는 '/' 슬러쉬 기호를 사용해 닫는 모양을 가지게됩니다. </div>처럼 말이죠 ~


알아본 것과 같이 만약 태그가 시작과 끝이 있다면? 그 안에 존재하는 내용들은 아마도 태그가 가진 특성에 영향을 주게될 것으로 예상할 수 있습니다.

html에 사용되는 태그는 굉장히 많습니다. 각각의 태그를 모두 설명할 수 없지만 하나하나 그 이유와 쓰임이 모두다릅니다.

# 태그의 특징

모든 태그를 설명할 수는 없지만 태그는 기본적으로 다음과 같은 특징을 가지고 있습니다.

1. 태그는 부모와 자식으로 구분할 수 있다. 즉, 태그간 위계가 존재한다.

2. 각각의 태그는 고유한 속성을 가질 수 있다.

위에 언급한 두가지 특징은 태그가 가진 가장 중요한 특징이라 할 수 있습니다. 먼저 태그의 위계에 대하여 알아보겠습니다.

태그는 위에 언급한 것과 같이 부모와 자식태그로 구분할 수 있습니다. 그래서 자식 태그는 다른 프로그래밍 언어처럼 부모태그의 일부 스타일을 상속받게 됩니다.

이런 이유로 태그를 사용할때는 부모요소를 무엇으로 선택할 것인지가  매우 중요합니다. 태그안에 태그가 존재하는 것을 그림으로 표현한다면 아래의 그림처럼 레이어와 같이 표현할 수 있습니다. 그래서 웹사이트의 이성적인 태그 설계가 더더욱 중요하겠습니다.

간단하게 예를들어보겠습니다. 만약 아래와 같은 화면설계가 존재할 경우 ... 일반적으로 다음과 같이 태그를 작성할 수 있을 것입니다.

모든 것을 다 이해할 필요는 없습니다. 여기서는 태그 안에 태그를 선언할 수 있고 부모 안에 위치한 태그는 부모의 영역 위에 존재하게 된다는 점만 꼭 알고 넘어가도록 하세요.


다음으로 태그안에는 속성(Attribute)을 설정할 수 있다는 점입니다. 태그의 속성을 사용하면 태그가 가진 특성을 설정 또는 변경할 수 있습니다. 그럼 예를들어볼까요? 다음의 a 태그를 봐주세요.


위의 a 태그는 아직 아무런 속성도 가지고 있지 않습니다. 속성이 없기 때문에 현재의 a 태그로 할 수 있는 것은 많지 않습니다. 하지만 a는 다음과 같은 속성을 정의할 수 있습니다.

href : 링크를 통해 위치할 url 주소를 지정할 수 있음
rel : 타겟 주소와의 관계를 지정
target : 연결된 링크를 어떻게 열 것인지 지정

위 속성들은 a 태그에 설정할 수 있는 고유 속성들입니다. 이 외에도 더 많은 속성들이 공통 속성으로 지정할 수 있습니다. 예를들어 id, class, style등이 그것입니다.

여기까지 태그가 무엇이고 태그를 통해 무엇을 할 수 있는지 간단히 알아보았습니다. 사실 위 내용들은 가장 기본이되는 내용으로 앞에 나온 개념들을 어느 정도 이해한다면 앞으로 알아볼 실전 코딩을 쉽게 적응하실 수 있을 것입니다.